<style>
    body{
        background: #F3F1F3
    }
    .order{
        padding-bottom: 3rem;
    }


    .order .contract{
        padding: 0 0 .5rem 0;
        display: flex;
        flex-direction: row;
        align-items: center;      

    }
    .order .contract input{       
        width: 1rem;
        height: 1.5rem;
        margin-right: .5rem;
        margin-left: 12px;
        background: #39AC6A;
        color: red;
    }  
    .order .contract div{   
        color: #666;
        font-size: 12px;
    }
    .order .order-flexd{
        position: fixed;
        bottom: 0;
        width: 95%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background: white;
        padding: .5rem;
        z-index: 5;
    }
    .order .order-flexd .column{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .order .order-flexd .row{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }  

    .order .total{
        font-size: 16px;
        font-weight: bold;
    }
    .order .column div:nth-child(2){
        font-size: 12px;
        color: #666;
    }
    .contract input{
        background-color: #39AC6A;
        color: #39AC6A;
    }
    /* 积分 */
    .integral{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        width: 100%;
    }
    .integral li{
        width: 30%;
        text-align: center;
        border: 1px solid #39AC6A;
        margin-top: .5rem;
        padding: .5rem 0;
        border-radius: 1rem;
        color: #39AC6A;
        background: white;
    }
    .integSpan{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .order .idImg{
        margin-left: 12px;
        margin-top: 10px;
        height: 145px;
        position: relative;
        background: white;
    }

    .order .idImg img{
        position: absolute;
        width: 100%;
        height: 100%;
        border:none;
        z-index: 2;
    }  
    .order .addImg{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        text-align: center; 
        width: 100%;
        height: 80%;
        padding-top: 10%;
        color: #CCCCCC;
    }

    .order .addImg input{
        position: absolute;
        z-index: 3;
        width: 100%;
        height: 100%;
        opacity: 0;
        margin-top: -5%;
    }
    .checkImg{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        text-align: center; 
    }    
    .checkImg div{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .checkImg img{
        margin-right: .3rem;
        height: .8rem;
    }
    .checkBox{
        height: 1rem;
        position: absolute;
        left: .53rem;
        border-radius: .2rem;
    }
    .plus{
        position: relative !important;
        width: 3rem !important;
        height: auto !important;
        z-index: 1 !important;
    }
@media screen and (min-width: 320px) and (max-width: 374px) {
    .order .orderTit{
        text-align: left;
        padding: 10px 12px;
        margin-top: .3rem;
        background: white;
        color: #333;
    }
    .order .idImg{
        margin-left: 11.5px;
        margin-top: 10px;
        height: 145px;
        position: relative;
        background: white;
    }
    .order .order-rend{
        font-size: 12px;
        color: #666;
    }
    .order .order-rend>li{
        padding: .1rem 0;
        display: flex;
        flex-direction: row;
        justify-content:space-between;
        align-items: center;
        padding: 10px 12px;
        margin-top: 1px;        
        background: white;
     
    }   
    .order .order-rend>li>span:nth-child(1){
        text-align: left;
        width: 20%;     
    }
    .order .order-rend>li>span:nth-child(2){
        width: 83%;     
    }
    .orderId{
        width: 23% !important;
    }
    .orderNum{
        width: 78% !important;
    }
    /* 身份证正面 */
  
    .order .order-flexd .row button{        
        width:5rem;
        height: 1.7rem;
        border-radius: 1rem;
        background: none;
        background: #39AC6A;
        color: white;        
    }
}
@media screen and (min-width: 375px) and (max-width: 412px) { 
    .order .orderTit{
        text-align: left;
        padding: 10px 12px;
        margin-top: .3rem;
        background: white;
        color: #333;
    }

    .order .order-rend{
        font-size: 12px;
        color: #666;
    }

    .order .idImg{
        margin-left: 13.5px;
        margin-top: 10px;
        height: 145px;
        position: relative;
        background: white;
    }
    .order .order-rend>li{
        padding: .1rem 0;
        display: flex;
        flex-direction: row;
        justify-content:space-between;
        align-items: center;
        padding: 10px 12px;
        margin-top: 1px;        
        background: white;
     
    }   
    .order .order-rend>li>span:nth-child(1){
        text-align: left;
        width: 20%;     
    }
    .order .order-rend>li>span:nth-child(2){
        width: 83%;     
    }
    .orderId{
        width: 23% !important;
    }
    .orderNum{
        width: 78% !important;
    }
   
    .order .order-flexd .row button{        
        width:6rem;
        height: 2rem;
        border-radius: 1rem;
        background: none;
        background: #39AC6A;
        color: white;        
    }
}
@media screen and (min-width: 412px) {
    .order .orderTit{
        text-align: left;
        padding: 10px 12px;
        margin-top: .3rem;
        background: white;
        color: #333;
    }
    .order .idImg{
        margin-left: 14.5px;
        margin-top: 10px;
        height: 145px;
        position: relative;
        background: white;
    }
    .order .order-rend{
        font-size: 12px;
        color: #666;
    }
    .order .order-rend>li{
        padding: .1rem 0;
        display: flex;
        flex-direction: row;
        justify-content:space-between;
        align-items: center;
        padding: 10px 12px;
        margin-top: 1px;        
        background: white;
     
    }   
    .order .order-rend>li>span:nth-child(1){
        text-align: left;
        width: 20%;     
    }
    .order .order-rend>li>span:nth-child(2){
        width: 83%;     
    }
    .orderId{
        width: 23% !important;
    }
    .orderNum{
        width: 78% !important;
    }
   
    .order .order-flexd .row button{        
        width:6rem;
        height: 2rem;
        border-radius: 1rem;
        background: none;
        background: #39AC6A;
        color: white;        
    }
}
</style>
<div class="order">
    <!-- S 房间大图 -->
        <container data='orderData.img'></container>

    <!-- 房间大图 E -->
    <!-- S 入住信息 -->
    <div class="orderTit">
        入住信息
    </div>
    <ul class="order-rend">
        <li>
            <span> 
               房间名称:
            </span>
            <span>
                {{orderData.title}}
            </span>
        </li>
        <li>
            <span>
                地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址:
            </span>
            <span>
                {{orderData.address}}
            </span>
        </li>
        <li>
            <span>
                入&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;住:   
            </span>
            <span>
                {{orderData.pre_start_time+'000' | date:'yyyy-MM-dd hh:mm:ss'}}
            </span>
        </li>
        <li>
            <span>
                离&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;开:  
            </span>
            <span>
                    {{orderData.pre_end_time+'000' | date:'yyyy-MM-dd hh:mm:ss'}}
            </span>
        </li>
        <li ng-if='orderData.deposit==0'>
            <span>
                押&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金:  
            </span>
            <span>
                {{orderData.cash |currency:"￥"}}
            </span>
        </li>
        <li>
            <span ng-init="integral=false">
                积&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分:    
            </span>
            <span ng-click="integral=!integral" class="integSpan">
                {{showInteg}}
                <i class="iconfont" ng-show="integral">&#xe610;</i>
                <i class="iconfont" ng-show="!integral">&#xe604;</i>
            </span>
        </li>
        <ul ng-show='integral' class="integral">
                <li ng-repeat="integralList in integralList track by $index" ng-click="getInteg(integralList)">{{integralList}}</li> 
            </ul>
    </ul>
    
    <!-- 入住信息 E -->

    <!-- S 个人信息 -->
    <div class="orderTit">
        个人信息
    </div>
    <ul class="order-rend">
        <li>
            <span> 
                真实姓名:
            </span>
            <span>
                {{orderData.name}}
            </span>
        </li>
        <li>
            <span>
                可用积分:
            </span>
            <span>
                {{orderData.integral}}
            </span>
        </li>
        <li>
            <span>
                手机号码:   
            </span>
            <span>
                {{orderData.phone}}
            </span>
        </li>
        <li>
            <span class="orderId">
                身份证编号:  
            </span>
            <span class="orderNum">
                {{orderData.cert_num}}
            </span>
        </li>
    </ul>
    <!-- <div class="idImg" id='useridImg'>
        <img ng-src="{{httpSrc+orderData.cert_img_off}}" alt="身份证正面">  
    </div>   -->
    <div class="idImg" id='useridImg2'>
        <img ng-src="{{httpSrc+orderData.cert_img_off}}" alt="身份证反面">  
    </div>  
    <!-- 入住信息 E -->

    <!-- S 签署合同 -->
    <div class="contract" ng-init="showImg=false">
        <input type="checkbox" name="qiansuxieyi" ng-init="subRend=false" ng-model="subRend" ng-click="showImg=!showImg"><div>我已经同意并签署房东 <a ui-sref='contract'>《租房合同》</a></div>
    </div> 
    <!-- 签署合同 E -->
    <div class="order-flexd">
        <div class="column">
            <div >
                <span class="total">合计：</span>
                <span class="org">{{orderData.price|currency:"￥"}}</span>
                <span class="size12 c666" ng-show="orderData.first">首单已免<span class="org">20</span></span>
            </div>
            <div class="checkImg">
                <div><img src="../gy/images/icon/security_checked.png" alt="安全支付"> 安全支付</div>  
                <div><img src="../gy/images/icon/guarantee.png" alt="安全支付">已买保险</div>
            </div>
        </div>
        <div class="row">
            <button ng-click="subOrder(showImg)"> 提交订单</button>
        </div>
    </div>
</div>